<template>
  <div class='product-details'>
    <div class="detail-info">
      <div class="left">
        <MySwiper />
      </div>
      <div class="right">
        <Info/>
      </div>
      <Intro />
    </div>
    <div class="shop-info">
      <ShopInfo />
      <HotSales :titleInfo0="titleInfo" />
    </div>
    <Serve />
  </div>
</template>
<script>
import ShopInfo from '../shops/shopInfo.vue'
import HotSales from '../windShop/hotSelected/hotSelected.vue'
import MySwiper from './swiper.vue'
import Info from './infos/infos'
import Intro from './intro/intro'
import Serve from '@/components/serve/serve.vue'
export default {
  components: {ShopInfo,HotSales,MySwiper,Info,Intro,Serve},
  name: "",
  data() {
    return {
      titleInfo:{
        icon:"iconfont icon-huo color-red mr10 ",
        title:"店铺热销",
        class:"mt0"
      },
        proInfo:{}
    };
  },
  methods: {

  },
  created() {

  }
};
</script>
<style lang="scss" scoped>
.product-details {
  width: 1200px;
  margin: 30px auto;
  display: flex;
  flex-wrap: wrap;

  .shop-info{
    width: 250px;
    box-sizing: border-box;
  }
  .detail-info{
    flex: 1;
    display: inherit;
    flex-wrap: wrap;
    padding-bottom: 50px;
  }
  .display>.left{
    display: inline-block;
  }
  .display>.right{
    display: inline-block;
  }
}
</style>